<template>
  <div>
    <h2>reactive 和 ref 的细节问题</h2>
    <h2>{{ m1 }}</h2>
    <h2>{{ m2 }}</h2>
    <h2>{{ m3 }}</h2>
    <button @click="msgClick">改变数据</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  setup() {
    const m1 = ref({
      name: '胭脂'
    })
    const m2 = reactive({
      name: '刘柏麟'
    })
    const m3 = ref('abc')
    const msgClick = () => {
      m2.name = '胭脂'
      // ref中如果放入的是一个对象，那么是经过了reactive的处理,形成了一个proxy类型的对象
      m1.value.name = '刘柏麟'
    }
    return {
      m1,
      m2,
      m3,
      msgClick
    }
  }
})
</script>

<style scoped>
</style>